<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">已购买商品</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state">
      <image 
        src="/static/image/icon_back.png" 
        mode="aspectFit" 
        class="empty-image"
      />
      <text class="empty-text">暂无已购买商品</text>
    </view>

    <!-- 功能提示 -->
    <view class="swipe-hint">
      <uni-icons type="more" size="24" color="#999"></uni-icons>
      <text class="hint-text">左右滑动查看更多功能</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 示例：获取已购商品数据
const purchasedItems = ref([])

onLoad(() => {
  // 实际项目中替换为接口调用
  // fetchPurchasedItems()
})
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #ffffff;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx;
  
  .empty-image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 40rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    text-align: center;
  }
}

.swipe-hint {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 30rpx;
  padding: 12rpx 30rpx;
  display: flex;
  align-items: center;
  
  .hint-text {
    font-size: 24rpx;
    color: #ffffff;
    margin-left: 8rpx;
  }
}
</style> 